<template>
    <div>
        <!-- 顶部导航 -->
        <van-nav-bar title="个人信息" left-text="返回" @click-left="onClickLeft" color="#999"  class="leader"  left-arrow>
            <template #right >
            <van-icon name="ellipsis" size='26px' color='#999' class="pullTab" @click.stop="ShowHidden = !ShowHidden" />
            <Pulltab 
                    v-if="ShowHidden" 
                    @click.stop=""
            />
            </template>
        </van-nav-bar>
        <div class="cont">
            <!-- 收货地址 -->
            <div class="address">
                <van-icon name="location-o" size="32px" color="#fff"/>
                <div class="info">
                    <span>收货人:张三</span>
                    <span>收货地址:大西洋国际</span>
                </div>
                <p>13984615566</p>
                <van-icon name="arrow" size="20px" color="#fff"/>
            </div>
            <!-- 商品信息 -->
            <div class="box">
                <div class="gbox">
                    <div class="store">
                        <van-icon name="shop-o" size="22px"/>
                        <span>供应商:噜噜HN百货(CQ)</span>
                    </div>
                    <div class="goodinfo"  v-for="(item,index) in goodslist" :key="index">
                        <div class="left">
                            <img :src="src+item.goodsImg" alt="">
                            <h2>{{item.goodsName}}</h2>
                        </div>
                        <div class="right">
                            <span>￥{{item.goodsPrice}}元</span>
                            <p>x1</p>
                        </div>
                    </div>
                    <div class="card">
                        <p>使用健康卡</p>
                        <h2>未使用
                            <van-icon name="arrow" />
                        </h2>
                    </div>
                    <div class="input">
                        <input type="text" placeholder="请输入券码">
                        <span>使用</span>
                    </div>
                    <div class="dingdan">
                        <p>*</p>
                        <div class="right">
                            <div class="xuqiu">
                                <span>共{{goodslist.length}}件</span>
                                <span>需求订单</span>
                            </div>
                            <h2>￥{{allInfo.allprice}}元</h2>
                        </div>
                    </div>
                    <div class="liuyan">
                        <span>给卖家留言：</span>
                        <input type="text" placeholder="留言">
                    </div>
                </div>
            </div>
            <!-- 弹出框 -->
            <van-cell is-link title="160礼品卡" @click="show = true" />
            <van-action-sheet v-model="show" title="礼品卡">
                <div class="content">
                    <p>您还没有礼品卡，请先获取礼品卡再来使用~</p>
                    <img src="https://www.160dyf.com/Public/mobile/img/fail@3x.768730a4.png" alt="">
                    <span>确定</span>
                </div>
            </van-action-sheet>
            <p class="font">慧医卡购买指定商品送健康豆，可抵现金使用</p>
            <div class="pay">
                <div class="left">
                    <span>合计</span>
                    <i>￥{{allInfo.allprice}}元</i>
                </div>
                <h2 @click="handleJump">立即购买</h2>
            </div>
        </div>
    </div>
</template>

<script>
import { List } from 'vant';
    import Pulltab from '../components/Pulltab.vue'
    export default {
        components: {
            Pulltab,
        },
        data() {
            return {
                ShowHidden: false,
                value: 1,
                show: false,
                src:"https://www.160dyf.com/",
                Allprice:0
            }
        },
        created () {
            console.log(this.Allprice);
        },
        updated () {
            let Allprice = this.value * this.checkoutlist.goodsPrice
            console.log(Allprice);
            this.Allprice = Allprice
            console.log(this.Allprice);
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            handleJump(){
                this.$router.push('/order')
                this.$store.commit('detail/Allprice',{
                    Allprice:this.allInfo.allprice,
                    list:this.goodslist,
                })
            }
        },
        computed: {
            goodslist() {
                return this.$store.state.cart.goodscarlist   //从状态机中拿取到的购物车数据
            },
            allInfo(){
                return this.$store.getters['cart/allInfo']  //获取到状态机getters中的数据
            },
        },
    }
</script>

<style src="../assets/css/checkout.css" scoped></style>
<style  scoped>
::v-deep .van-nav-bar__left i{
    color:#00D6D4;
    font-size: 20px;
}
::v-deep .van-nav-bar__left span,::v-deep .van-nav-bar__title{
    color: #00D6D4;
    font-size: 16px;
}
</style>